<template>
  <el-dialog title="设置角色" :visible="isShowRole" top="0px">
    <el-form label-width="100px">
      <el-form-item label="用户名">
        <el-input :value="username" disabled></el-input>
      </el-form-item>
      <el-form-item label="角色列表">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{
            city.roleName
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { toAssignApi, doAssingApi } from "@/api/acl/user.js";
import { Message } from "element-ui";
export default {
  name: "UserRole",
  data() {
    return {
      checkAll: false,
      // 选中的数据id
      checkedCities: [],
      // 全部数据
      cities: [],
      // 控制半选
      isIndeterminate: true,
      // 全部数据的id
      AllcitiesId: []
    };
  },
  props: ["isShowRole", "id", "update:isShowRole", "update:id", "username"],
  watch: {
    id(val) {
      if (val) {
        this.GetroleList();
      }
    }
  },

  methods: {
    // 关闭
    clearInfo() {
      this.$emit("update:isShowRole", !this.isShowRole);
      this.$emit("update:id", null);
      this.checkAll = false;

      this.checkedCities = [];
      // 全部数据
      this.cities = [];
      // 控制部分选中
      this.isIndeterminate = true;

      // 全部数据的id
      this.AllcitiesId = [];
    },
    // 获取角色列表
    async GetroleList() {
      if (this.id) {
        const result = await toAssignApi(this.id);
        // console.log(result.data);
        const { allRolesList, assignRoles } = result.data;
        this.cities = allRolesList;
        // 得到选中的id
        assignRoles.forEach(item => this.checkedCities.push(item.id));
      }
    },

    // 保存
    async save() {
      await doAssingApi(this.id, this.checkedCities.toString());
      Message.success("保存成功");
      // 重新获取分页数据
      this.$emit("getPageList");
      this.clearInfo();
    },
    //取消清空数据
    cancel() {
      this.clearInfo();
    },
    handleCheckAllChange(val) {
      // 得到全部的id
      this.AllcitiesId = this.cities.map(item => item.id);
      // console.log(this.AllcitiesId);
      // 如果选中的和全选的状态一致 就 返回 全部的id 也就是全选 lable绑定的是id就是选中的值
      this.checkedCities = val ? this.AllcitiesId : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    }
  }
};
</script>

<style></style>
